<template>
  <!-- 运输工具信息 -->
  <div>
    <el-form
      v-if="dialogType != 'detail'"
      ref="vehicleInfo"
      :model="form"
      :rules="rules"
      size="mini"
      label-position="right"
      label-width="148px"
      class="flex-form"
    >
      <el-form-item label="运输工具名称" prop="transportName">
        <el-input
          v-model="form.transportName"
          placeholder="请输入运输工具名称"
           ref="transportNameInput"
        >
        <el-button slot="append" icon="el-icon-search" @click="openSelectVehicle"></el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="运输工具代码" prop="transportId">
        <el-input v-model="form.transportId" placeholder="请输入运输工具代码"/>
      </el-form-item>
     <!-- <el-form-item label="IC卡号" prop="icCardNo">
        <el-input v-model="form.icCardNo" placeholder="请输入运输工具代码"/>
      </el-form-item>
      <el-form-item label="电子车牌" prop="rfid">
        <el-input v-model="form.rfid" placeholder="请输入运输工具代码"/>
      </el-form-item> -->
      <el-form-item label="抵达第一目的港日期" prop="arrivalDate">
        <el-date-picker
          clearable
          v-model.trim="form.arrivalDate"
          type="datetime"
          value-format="yyyyMMddHHmmss"
          placeholder="选择抵达第一目的港日期"
          style="width: 172px"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="驾驶员代码" prop="driverId">
        <el-input v-model="form.driverId" placeholder="请输入驾驶员代码"/>
      </el-form-item>
      <el-form-item label="驾驶员名称" prop="driverName">
        <el-input v-model="form.driverName" placeholder="请输入驾驶员名称"/>
      </el-form-item>
      <el-form-item label="健康状态" prop="healthStatus">
        <el-select
          v-model="form.healthStatus"
          placeholder="请选择健康状态"
        >
          <el-option
            v-for="(item, index) in healthStatusDict"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否有预防接种" prop="vaccinateStatus">
        <el-select
          v-model="form.vaccinateStatus"
          size="mini"
          placeholder="是否有预防接种"
        >
          <el-option label="是" value="1"></el-option>
          <el-option label="否" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="司乘人员数" prop="numStaffMember">
        <el-input-number
          v-model="form.numStaffMember"
          size="mini"
          :min="1"
          placeholder="司乘人员数"
          controls-position="right"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="途径国家或地区" prop="routeCountry">
        <el-select
          v-model="form.routeCountry"
          placeholder="请选择途径国家或地区"
          filterable
          multiple
          style="width: 100%"
        >
          <el-option
            v-for="(item, index) in dict.type.mft_route_country"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="托架/拖挂车信息" prop="trayList">
        <el-button class="input-btn" icon="el-icon-plus" @click="handleTray"
        >添加({{ form.trayList.length }})
        </el-button
        >
      </el-form-item>
    </el-form>

    <!-- 挂车信息 -->
    <trailer-info
      ref="trailerInfo"
      @submitTrailerInfo="submitTrailerInfo"
      :trailerList="form.trayList"
    ></trailer-info>

    <!-- 选择运输工具弹出层 -->
    <select-vehicle
      ref="selectVehicle"
      @selectVeChange="selectVeChange"
    ></select-vehicle>

  </div>
</template>

<script>
import curr_type from "@/assets/dicts/curr_type.json";
import trailerInfo from "./trailerInfo.vue";
import SelectVehicle from "@/views/swdecl/components/selectBdVehicle.vue";
export default {
  name: "addEmptyTransport",
  components: {trailerInfo, SelectVehicle},
  dicts: ["bt_country","mft_route_country"],
  props: {
    transportList: {
      type: Array,
      default: () => []
    },
    dialogType: {
      type: String,
      default: "add",
    },
  },
  data() {
    return {
      // 运输工具列表
      vehicleList: [],
      //健康状态
      healthStatusDict: [{value: '1', label: '正常', listClass: null}, {value: '0', label: '异常', listClass: null}],
      form: {
        arrivalDate: null,
        driverId: null,
        driverName: null,
        icCardNo: null,
        rfid: null,
        healthStatus: "1",
        numStaffMember: null,
        transportId: null,
        transportName: null,
        vaccinateStatus: null,
        customLockList: [],//关锁信息
        trayList: [],
        contaList: [],
      },
      rules: {
        arrivalDate: [
          {
            type: "string",
            required: true,
            message: "选择抵达第一目的港日期不能为空",
            trigger: "blur",
          },
        ],
        driverId: [
          {
            type: "string",
            required: true,
            message: "驾驶员代码不能为空",
            trigger: "blur",
          },
        ],
        driverName: [
          {
            type: "string",
            required: true,
            message: "驾驶员名称不能为空",
            trigger: "blur",
          },
        ],
        healthStatus: [
          {
            type: "string",
            required: true,
            message: "健康状态不能为空",
            trigger: "blur",
          },
        ],
        numStaffMember: [
          {
            required: true,
            message: "司乘人员数不能为空",
            trigger: "blur",
          },
        ],
        transportId: [
          {
            type: "string",
            required: true,
            message: "运输工具代码不能为空",
            trigger: "blur",
          },
        ],
        transportName: [
          {
            type: "string",
            required: true,
            message: "运输工具名称不能为空",
            trigger: "blur",
          },
        ],
        vaccinateStatus: [
          {
            type: "string",
            required: true,
            message: "是否预防接种不能为空",
            trigger: "blur",
          },
        ],
        routeCountry: [
          {
            required: true,
            message: "途径国家和地区不能为空",
            trigger: "blur",
          },
        ],
      },
      editBillIndex: -1,
      currentAddIndex: -1,
      currentCheckedRow: {},
      bt_currency: curr_type.value, //货币类型字典
    };
  },
  computed: {
    dictProp() {
      //字典list，为避免子组件重复调接口获取，用computed计算传值
      return {
        type: this.dict.type,
      };
    },
  },
  watch: {
    transportList: {
      immediate: true,
      handler(val) {
        this.vehicleList = val;
      }
    }
  },
  methods: {

    resetGoodsForm() {
      this.$refs["vehicleInfo"].resetFields();
      this.form.trayList = [];
    },

    // 添加挂车
    handleTray() {
      this.$refs.trailerInfo.open();
    },
    // 挂车list
    submitTrailerInfo(val) {
      this.form.trayList = val;
    },
    // 选择车辆
    openSelectVehicle() {
      this.$refs.selectVehicle.open();
      this.$refs.transportNameInput.blur();
    },
    selectVeChange(val) {
      this.form.transportName = val.realVeNo;
      this.form.transportId = val.veCustomsNo;
      this.form.driverName = val.driverName;
      // this.form.driverId = val.ownerCiphertextIdno;
    },


  },
};
</script>

<style lang="scss" scoped>
.flex-form {
  .el-form-item {
    width: 312px;
    margin-right: 0px;
  }
}

::v-deep .el-table__header {
  .el-checkbox {
    display: none;
  }
}

::v-deep .el-input-group__prepend {
  border: none !important;
  background: none !important;
}

::v-deep .input-btn {
  color: #13ce66 !important;
  background: #e7faf0 !important;
  border-color: #a1ebc2 !important;
}
.emptySmall {
  ::v-deep .el-empty {
    padding: 0;
  }
  ::v-deep .el-empty__image {
    width: 80px !important;
  }
  ::v-deep .el-empty__description {
    margin-top: 0;
    p {
      font-size: 12px;
    }
  }
}
</style>
